<template>
  <!-- 头部导航 -->
  <!-- $router.back()返回 -->
  <div class="edit">
    <van-nav-bar
      title="个人编辑页"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" color="#f00" size="6vw"> </van-icon>
      </template>
    </van-nav-bar>
    <!-- 2.0 头像 -->
    <div class="avatar">
      <div class="avatar-img">
        <van-uploader :after-read="afterRead">
          <van-image
            round
            fit="cover"
            width="100%"
            height="100%"
            :src="userinfo.head_img"
          />
        </van-uploader>
      </div>
    </div>
    <!-- 2.0 单元格 -->
    <MyCell
      title="昵称"
      :value="userinfo.nickname"
      @click="
        nicknameShow = true;
        nicknameTemp = userinfo.nickname;
      "
    ></MyCell>
    <MyCell title="密码" value="*******" @click="passwordShow = true"></MyCell>
    <MyCell
      title="性别"
      :value="userinfo.gender ? '男' : '女'"
      @click="genderShow = true"
    ></MyCell>
    <van-dialog
      v-model="nicknameShow"
      title="修改昵称"
      show-cancel-button
      @confirm="nicknameFn"
    >
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-field
        required
        v-model="nicknameTemp"
        label="文本"
        placeholder="请输入用户名"
      />
    </van-dialog>

    <van-dialog
      v-model="passwordShow"
      title="修改密码"
      show-cancel-button
      :before-close="befooreClose"
    >
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-field
        required
        v-model="passwordOld"
        label="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        required
        v-model="passwordNew"
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>

    <!-- ActionSheet 动作面板 -->
    <van-action-sheet
      v-model="genderShow"
      :actions="[
        { name: '男', gender: 1 },
        { name: '女', gender: 0 },
      ]"
      cancel-text="取消"
      close-on-click-action
      @select="genderFn"
    />
  </div>
</template>
<script>
import MyCell from "../components/MyCell.vue";
import request from "../utils/request";
import { uploadFileAPI } from "../apis/index";
import { userDetailByIdAPI, userUpdateByIdAPI } from "../apis/user";
export default {
  components: { MyCell },
  data() {
    return {
      userinfo: {},
      nicknameShow: false,
      nicknameTemp: "",

      // 用户密码
      passwordShow: false,
      passwordNew: "",
      passwordOld: "",

      // 性别
      genderShow: false,
    };
  },
  async created() {
    // 通过 Vue 调试工具可以更方便找到 id 到底是在那个对象上存储
    const id = this.$route.query.id;
    // 是否成功获取id
    // 根据 id 获取用户信息
    if (id) this.$toast.fail("没有用户id");
    const res = await userDetailByIdAPI(id);
    // 是否成功获取用户数据
    // console.log(res);
    res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
    // console.log(res.data.data.head_img);
    this.userinfo = res.data.data;
  },
  methods: {
    // file 就是选择的文件对象
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      // 上传需要用FormData的方式
      const fd = new FormData();
      fd.append("file", file.file);
      // 传进入的参数是一个FormData对象
      const res = await uploadFileAPI(fd);
      console.log(res);
      // 判断文件是否成功上传
      if (res.data.message === "文件上传成功") {
        // 获取图片地址
        const imgUrl = res.data.data.url;
        // 把新的图片地址，更新到用户信息中
        const res2 = await userUpdateByIdAPI(this.$route.query.id, {
          head_img: imgUrl,
        });
        // 更新头像的展示
        this.userinfo.head_img =
          request.defaults.baseURL + res2.data.data.head_img;
        // console.log(res2);
        this.$toast.success("用户更新头像成功");
      }
    },
    // 更新用户userUpdateByIdAPI
    async nicknameFn() {
      if (this.nicknameTemp === "") return this.$notify("请输入内容，不能为空");
      // 发送请求
      const res = await userUpdateByIdAPI(this.$route.query.id, {
        nickname: this.nicknameTemp,
      });
      this.userinfo.nickname = res.data.data.nickname;
      this.$toast.success("昵称更新成功");
    },

    async befooreClose(action, done) {
      // 如果点击的是确定按钮
      if (action === "confirm") {
        if (
          this.passwordOld === this.userinfo.password &&
          /^[a-zA-Z0-9~!@#$%^&*_+=-]{3,18}$/.test(this.passwordNew)
        ) {
          // console.log("原密码输入正确，新密码也合法，可以走更新逻辑了");
          // 🔔 主动关闭弹窗
          done();
          // 检查：用户输入的原密码是否正确
          // console.log("原密码输入正确");
          const res = await userUpdateByIdAPI(this.$route.query.id, {
            password: this.passwordNew,
          });
          // 如果修改成功，提示用户
          if (res.data.message === "修改成功") {
            // 由于页面没有刷新，所以修改后的密码也要做一下数据的同步
            this.userinfo.password = this.passwordNew;
            this.$toast.success("密码修改成功");
          }
        } else {
          // 阻止弹窗关闭
          done(false);
          this.$toast.fail("原密码输入错误或密码不合法");
        }
      } else {
        // 主动关闭弹窗
        done();
      }
    },
    // 编辑性别
    async genderFn(item) {
      // console.log("你点击了性别按钮")
      const res = await userUpdateByIdAPI(this.$route.query.id, {
        gender: item.gender,
      });
      console.log(res);
      if (res.data.message === "修改成功") {
        // 轻提示
        this.$toast.success("性别更新成功");
        // 不刷新页面，还要同步一下视图的数据
        this.userinfo.gender = res.data.data.gender;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  .avatar-img {
    width: 100px;
    height: 100px;
  }
}
</style>